<template>
  <div>
    <el-collapse-transition>
      <div v-show="!isShowDetail" v-loading="loading">
        <!-- 标题 tab  -->
        <div class="head">
          <AppMainTitle title="待处理订单" />
          <el-form ref="filterForm" :model="filterForm" label-width="100px">
            <el-form-item label="工作门店：">
              <el-select
                v-model="filterForm.shopId"
                filterable
                placeholder="可通过名称搜索"
                style="width:300px"
              >
                <el-option
                  v-for="(item, index) in $store.state.user.allManageShopFilterOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <el-button
                style="margin-left:10px;"
                type="primary"
                round
                size="medium"
                @click="fetchData(1)"
              >刷新</el-button>
            </el-form-item>
          </el-form>
          <div class="tab">
            <el-tabs v-model="tabName" @tab-click="changeTabName">
              <!-- <el-tab-pane label="全部" name="all" /> -->
              <el-tab-pane label="预订" name="book" />
            </el-tabs>
          </div>
        </div>

        <div class="content app-main-content-box">
          <!-- 列表 -->
          <ul>
            <li v-for="(item,index) in list" :key="index" class="cell-item">
              <el-card class="card-container">
                <div class="flexRBC">
                  <div class="flexRSC">
                    <div class="public-box logo-box">
                      <i class="el-icon-document head-image" />
                    </div>
                    <!-- 类型 -->
                    <div class="public-box type-box">
                      <div class="type">{{ subTypeOptions[item.subType] }}</div>
                      <div class="time">{{ item.createTime }}</div>
                    </div>
                    <!-- 信息 -->
                    <div class="public-box info-box">
                      <div class="title">{{ item.title }}</div>
                      <div class="cell-info">入住门店：{{ item.shopName }}</div>
                      <div
                        v-if="item.subType===0"
                        class="cell-info"
                      >入住时间：{{ item.bizData.beginDay }} ~ {{ item.bizData.endDay }}</div>
                      <div
                        v-if="item.subType===1||item.subType===2"
                        class="cell-info"
                      >可用时间：{{ item.bizData.beginDay }}</div>
                      <div
                        v-if="item.subType===1||item.subType===2"
                        class="cell-info"
                      >时长：{{ item.bizData.periodDuration/60 }}小时</div>
                      <div
                        class="cell-info"
                      >到店时间：{{ item.bizData.beginDay }} {{ item.bizData.arrivalTime }}</div>
                    </div>
                  </div>
                  <div class="btn-group">
                    <el-button
                      v-if="item.subType===0&&!$store.getters.banBtnList.includes('MCH_BTN_BK_FD_CONFIRM')||
                        item.subType===1&&!$store.getters.banBtnList.includes('MCH_BTN_BK_HR_CONFIRM')||
                        item.subType===2&&!$store.getters.banBtnList.includes('MCH_BTN_BK_KTV_CONFIRM')
                      "
                      type="primary"
                      size="small"
                      round
                      @click="openConfirmOrder(item)"
                    >确认订单</el-button>
                    <el-button
                      v-if="item.subType===0&&!$store.getters.banBtnList.includes('MCH_BTN_BK_FD_CANCEL')||
                        item.subType===1&&!$store.getters.banBtnList.includes('MCH_BTN_BK_HR_CANCEL')||
                        item.subType===2&&!$store.getters.banBtnList.includes('MCH_BTN_BK_KTV_CANCEL')
                      "
                      type="danger"
                      size="small"
                      round
                      @click="openCancelOrder(item)"
                    >取消订单</el-button>
                    <el-button type="info" size="small" round @click="openOrderDetail(item)">查看详情</el-button>
                  </div>
                </div>
              </el-card>
            </li>
          </ul>

          <!-- 暂无数据 -->
          <div v-show="!loading&&paginationConfig.total===0" class="not-list">暂无待处理订单</div>

          <!-- 分页 -->
          <pagination-direction
            v-if="paginationConfig.total!==0"
            :config="paginationConfig"
            @sizeschange="sizesChange"
            @pagechange="pageChange"
          />
        </div>
      </div>
    </el-collapse-transition>

    <!-- 详情 -->
    <el-collapse-transition>
      <order-detail v-show="isShowDetail" ref="orderDetail" />
    </el-collapse-transition>

    <!-- 弹框 -->
    <DialogConfirmOrder ref="confirmOrder" />
    <DialogCancelOrder ref="cancelOrder" />
  </div>
</template>

<script>
import { getBookAuditList } from '@/api/work'
import OrderDetail from '@/views/bookingModule/views/components/OrderDetail'
import DialogConfirmOrder from '@/views/bookingModule/views/components/DialogConfirmOrder'
import DialogCancelOrder from '@/views/bookingModule/views/components/DialogCancelOrder'
export default {
  components: {
    OrderDetail,
    DialogConfirmOrder,
    DialogCancelOrder
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      subTypeOptions: {
        0: '全日房',
        1: '钟点房',
        2: 'KTV房'
      },
      // 状态
      loading: false,
      isShowDetail: false,
      // 数据
      tabName: 'book',
      filterForm: {
        shopId: '',
        subTypes: []
      },
      list: [],
      timeId: ''
    }
  },
  mounted() {
    /**
       * todo
       * 暂时强制解决subTypes权限问题
       */
    if (!this.$store.getters.banBtnList.includes('MCH_CARD_BK_FD_AUDIT')) {
      this.filterForm.subTypes.push(0)
    }

    if (!this.$store.getters.banBtnList.includes('MCH_CARD_BK_HR_AUDIT')) {
      this.filterForm.subTypes.push(1)
    }

    if (!this.$store.getters.banBtnList.includes('MCH_CARD_BK_KTV_AUDIT')) {
      this.filterForm.subTypes.push(2)
    }
    this.fetchData()
    clearTimeout(this.timeId)
    this.timeId = setInterval(() => {
      this.fetchData()
    }, 60000)
  },

  destroyed() {
    if (this.timeId) clearInterval(this.timeId)
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取数据
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      this.filterForm.pageNum = page
      this.filterForm.pageSize = pageSize
      const params = Object.assign({}, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      // 暂时解决门店id权限问题 不是总部强制查询当前门店id
      if (this.$store.state.user.shopId !== 0) {
        params.shopId = this.$store.state.user.shopId
      }
      if (params.subTypes.length === 0) {
        this.list = []
        this.paginationConfig.total = 0
        return
      }

      this.loading = true
      getBookAuditList(params)
        .then(res => {
          const list = res.data.list
          list.map(v => {
            v.bizData = JSON.parse(v.bizData)
          })
          this.list = list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .catch(err => {
          if (err && (err.code === 40001 || err.code === 40002)) {
            clearTimeout(this.timeId)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    },

    /**
       * 按钮组
       */
    //  切换tab
    changeTabName() {
      this.fetchData(1)
    },

    // 打开详情
    openOrderDetail(row) {
      this.isShowDetail = true
      this.$refs.orderDetail.open({ orderNo: row.orderNo }).then(res => {
        this.isShowDetail = false
        this.fetchData()
      })
    },

    // 确认订单
    openConfirmOrder(row) {
      this.$refs.confirmOrder.open(row).then(res => {
        this.fetchData()
      })
    },

    // 取消订单
    openCancelOrder(row) {
      const item = JSON.parse(JSON.stringify(row))
      const roomPrices = item.bizData.roomPrices
      for (const key in roomPrices) {
        const newKey = this.$momentMini(key).format('YYYY-MM-DD')
        roomPrices[newKey] = roomPrices[key]
        delete roomPrices[key]
      }
      this.$refs.cancelOrder.open(item).then(res => {
        this.fetchData()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /*  头部 */
  .head {
    padding: 24px 30px 0;
    border-radius: 5px;
    background-color: #fff;
    /* tab */
    .tab ::v-deep {
      .el-tabs__header {
        margin-bottom: 0;
        background-color: #fff;
        border-radius: 0 0 5px 5px;
      }
      .el-tabs__nav-wrap::after {
        background-color: #fff;
      }
      .el-tabs__active-bar {
        height: 4px;
      }
    }
  }

  /* 内容 */
  .content {
    margin-top: 10px;
    /* 列表 */
    .cell-item {
      margin-bottom: 10px;
      .card-container {
        width: 100%;
        min-width: 900px;
      }
      .public-box {
        margin-right: 20px;
      }
      /* logo */
      .logo-box {
        flex: 0 0 100px;
        height: 100px;
        font-size: 100px;
      }
      /* 类型 */
      .type-box {
        .type {
          margin-bottom: 10px;
          font-weight: bold;
        }
      }
      /* 详情 */
      .info-box {
        font-size: 14px;
        .title {
          margin-bottom: 10px;
          font-size: 16px;
          font-weight: bold;
        }
        .cell-info {
          line-height: 24px;
        }
      }
      /* 按钮组 */
      .btn-group {
        display: flex;
        flex: 0 0 280px;
        justify-content: flex-end;
      }
    }

    /* 没数据 */
    .not-list {
      text-align: center;
      color: $light-font-color;
      font-size: 14px;
    }
  }
</style>
